<!DOCTYPE html>
<html ng-app="x">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width">
    <base href="../"/>
    <title>UI.Layout : Messy Demo</title>
    <!-- Le css -->
    <link href="/skins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="/skins/css/ui-layout.css"/>
      <link href="/skins/css/site.css" rel="stylesheet">
      <link rel="stylesheet" href="/skins/font-awesome/css/font-awesome.min.css">
  </head>
  <body  class="container">
  <div  ui-layout options="{dividerSize:'0px'}" class="layout-mock">
      <header class="north-back" size="50px">
          <!-- 顶部导航开始 -->
          <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
              <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand" href="index.html">WorkHelper</a>
              </div>
              <div class="page-sidebar navbar-collapse collapse">
                  <ul class="nav navbar-nav navbar-right navbar-user">
                      <li class="dropdown messages-dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-envelope"></i> Messages <span class="badge">7</span> <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li class="dropdown-header">7 New Messages</li>
                              <li class="message-preview">
                                  <a href="#">
                                      <span class="avatar"><img src="http://placehold.it/50x50"></span>
                                      <span class="name">John Smith:</span>
                                      <span class="message">Hey there, I wanted to ask you something...</span>
                                      <span class="time"><i class="fa fa-clock-o"></i> 4:34 PM</span>
                                  </a>
                              </li>
                              <li class="divider"></li>
                              <li class="message-preview">
                                  <a href="#">
                                      <span class="avatar"><img src="http://placehold.it/50x50"></span>
                                      <span class="name">John Smith:</span>
                                      <span class="message">Hey there, I wanted to ask you something...</span>
                                      <span class="time"><i class="fa fa-clock-o"></i> 4:34 PM</span>
                                  </a>
                              </li>
                              <li class="divider"></li>
                              <li class="message-preview">
                                  <a href="#">
                                      <span class="avatar"><img src="http://placehold.it/50x50"></span>
                                      <span class="name">John Smith:</span>
                                      <span class="message">Hey there, I wanted to ask you something...</span>
                                      <span class="time"><i class="fa fa-clock-o"></i> 4:34 PM</span>
                                  </a>
                              </li>
                              <li class="divider"></li>
                              <li><a href="#">View Inbox <span class="badge">7</span></a></li>
                          </ul>
                      </li>
                      <li class="dropdown alerts-dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> Alerts <span class="badge">3</span> <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Default <span class="label label-default">Default</span></a></li>
                              <li><a href="#">Primary <span class="label label-primary">Primary</span></a></li>
                              <li><a href="#">Success <span class="label label-success">Success</span></a></li>
                              <li><a href="#">Info <span class="label label-info">Info</span></a></li>
                              <li><a href="#">Warning <span class="label label-warning">Warning</span></a></li>
                              <li><a href="#">Danger <span class="label label-danger">Danger</span></a></li>
                              <li class="divider"></li>
                              <li><a href="#">View All</a></li>
                          </ul>
                      </li>
                      <li class="dropdown user-dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> John Smith <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#"><i class="fa fa-user"></i> Profile</a></li>
                              <li><a href="#"><i class="fa fa-envelope"></i> Inbox <span class="badge">7</span></a></li>
                              <li><a href="#"><i class="fa fa-gear"></i> Settings</a></li>
                              <li class="divider"></li>
                              <li><a href="#"><i class="fa fa-power-off"></i> Log Out</a></li>
                          </ul>
                      </li>
                  </ul>
              </div>
          </div>
          <!-- 顶部导航结束 -->
      </header>
      <ui-layout options="{ flow : 'column',dividerSize:'0px' }">
          <sidebar class="west-back" size="20%">
              <div class="page-sidebar">
                  <ul class="nav side-nav">
                      <li class="active"><a href="index.html"><i class="fa fa-dashboard"></i>主页</a></li>
                      <li><a href="charts.html"><i class="fa fa-bar-chart-o"></i> Charts</a></li>
                      <li><a href="tables.html"><i class="fa fa-table"></i> Tables</a></li>
                      <li><a href="forms.html"><i class="fa fa-edit"></i> Forms</a></li>
                      <li><a href="typography.html"><i class="fa fa-font"></i> Typography</a></li>
                      <li class="dropdown">
                          <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-caret-square-o-down"></i> Dropdown <b class="caret"></b></a>
                          <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Item</a></li>
                              <li><a href="#">Another Item</a></li>
                              <li><a href="#">Third Item</a></li>
                              <li><a href="#">Last Item</a></li>
                          </ul>
                      </li>
                      <div class="clearfix"></div>
                  </ul>
                  <div class="clearfix"></div>

                  </div>
              <div class="clearfix"></div>
          </sidebar>
          <div class="center-back">

          </div>
          <!--<sidebar class="east-back" size="5%"></sidebar>-->
      </ui-layout>
      <footer class="south-back" size="40px"></footer>
  </div>
    <!-- Le javascript -->
  <script src="/skins/js/jquery-2.1.1.min.js"></script>
  <script src="/skins/bootstrap/js/bootstrap.min.js"></script>
    <script type="application/javascript" src="/skins/js/angular.min.js"></script>
    <script type="application/javascript" src="/skins/js/ui-layout.js"></script>
    <script type="application/javascript">

angular.module('x', ['ui.layout']);

    </script>


  </body>
</html>
